<script setup>
import { TagsOutlined, AppstoreAddOutlined } from '@ant-design/icons-vue'
// 随机颜色：生成高亮16进制颜色
// 16进制颜色值：000000-FFFFFF
const randomColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16)
// Tags标签名称
const tags = ['All', 'HTML5', 'CSS3', 'CSS3', 'Javascript', 'Java', '网页设计', 'Hadoop', 'All', 'HTML5', 'CSS3', 'Javascript', 'Java', '网页设计', 'Hadoop', 'All', 'HTML5', 'CSS3', 'Javascript', 'Java', '网页设计', 'Hadoop', 'All', 'HTML5', 'CSS3', 'Javascript', 'Java', '网页设计', 'Hadoop', 'All', 'HTML5', 'CSS3', 'Javascript', 'Java', '网页设计', 'Hadoop', 'Java', '网页设计', 'Hadoop']
</script>
<template>
	<div class="user-category">
		<!-- 用户基本信息 -->
		<a-flex gap="middle" vertical align="center">
			<div><img src="@/assets/imgs/head.jfif" /></div>
			<div>崔大洪</div>
			<a-flex class="user-base" justify="space-between">
				<div>
					<div class="num">28</div>
					<div class="text">Article</div>
				</div>
				<div>
					<div class="num">38</div>
					<div class="text">Tag</div>
				</div>
			</a-flex>
		</a-flex>
		<a-divider />
		<!-- 帖子分类 -->
		<div class="catgary">
			<AppstoreAddOutlined />
			Catgarys
		</div>
		<!-- 分类卡片 -->
		<div class="catgary-item">
			<a-flex class="catgary-item-box" justify="space-between" align="middle" v-for="item in 4">
				<div>MySQL性能分析</div>
				<a-tag :color="randomColor()">10</a-tag>
			</a-flex>
		</div>
		<a-divider />
		<div class="tags">
			<TagsOutlined />
			Tags
		</div>
		<a-tag :color="randomColor()" v-for="tag in tags">{{ tag }}</a-tag>
	</div>
</template>
<style scoped>
.user-category {
	margin: 20px 20px 20px 0;
	/* height: 600px; */
	padding: 20px 10px 20px 30px;
	box-sizing: border-box;
}

.user-category img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 1px solid #eee;
}
.user-base > div:first-child {
	border-right: 1px solid #eee;
}
.user-base .num {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	width: 150px;
	font-family: 'Broadway';
	margin-bottom: 5px;
}
.user-base .text {
	font-size: 16px;
	text-align: center;
	width: 150px;
	font-family: 'Bradley Hand ITC';
}
.user-category .catgary .anticon-appstore-add,
.user-category .tags .anticon-tags {
	font-size: 25px;
	color: #ff8533;
	vertical-align: middle;
}
.user-category .catgary,
.user-category .tags {
	font-size: 18px;
	margin-bottom: 15px;
	color: #ff8533;
	font-weight: bold;
}

.catgary-item-box {
	border: 1px solid #eee;
	margin: 10px 0;
	padding: 10px 8px;
	box-shadow: 5px 5px 10px #eee;
	cursor: pointer;
}
.catgary-item-box:hover > div {
	color: #ff8533;
	font-weight: bold;
	transition-duration: 0.1s;
}
.catgary-item-box:hover {
	transform: scale(1.04);
	transition-duration: 0.1s;
}
.ant-tag {
	margin-bottom: 5px;
}
</style>
